import React, {Component} from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom'
import QueryString from 'query-string'
import ProductModel from '../../../../models/productModel'
import WParsing from '../../../../components/marked/parsing'
import { Typography, Breadcrumb } from 'antd';
import { Link } from 'react-router-dom'
const { Title, Text } = Typography;

interface StateInterface {
  model: ProductModel
}

interface PropsInterface extends RouteComponentProps {
}

class WebStudyDetail extends Component<PropsInterface, StateInterface> {

  state: Readonly<StateInterface> = {
    model: new ProductModel()
  }

  componentDidMount() {
    this.getData()
  }

  getData() {
    const { id } = QueryString.parse(this.props.location.search)
    ProductModel.getDetail((id as string)).then((model) => {
      this.setState(() => {
        return {
          model: model
        }
      })
    }).catch(() => {})
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    const {model} = this.state
    return (
      <div className={ 'w-content-box' }>
        <br />
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link replace to="/web/product">作品列表</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>作品详情</Breadcrumb.Item>
        </Breadcrumb>
        <br />
        <Title level={3} className={ `w-text-center` }>{ model.name }</Title>
        <div className={ `w-text-center` }>
          <Text type="secondary">{ model.dateStr }</Text>
        </div>
        <div className={ `w-text-center` }>
          <Text className={ `w-text-center` }>{ model.describe }</Text>
        </div>
        <br />
        <br />
        <WParsing markedStr={ model.content }></WParsing>
        <br />
        <br />
      </div>
    );
  }
}

export default withRouter<PropsInterface>(WebStudyDetail);
